<!DOCTYPE html>
<html lang="{{ site.lang | default: 'zh-CN' }}">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {% seo %}
  
  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      line-height: 1.6;
      color: #24292e;
    }
    
    .page-header {
      background-color: #159957;
      background-image: linear-gradient(120deg, #155799, #159957);
      padding: 0.5rem 1rem;
      position: sticky;
      top: 0;
      z-index: 10;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .project-name {
      margin-top: 0;
      margin-bottom: 0;
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
    }
    
    .project-tagline {
      margin: 0;
      font-weight: normal;
      opacity: 0.8;
      font-size: 0.8rem;
      color: #fff;
    }
    
    .main-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
      display: flex;
      gap: 2rem;
    }
    
    .sidebar {
      width: 280px;
      flex-shrink: 0;
    }
    
    .sidebar nav {
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 40px); /* Viewport height minus top offset and some padding */
      overflow-y: auto;
    }
    
    .post-nav {
      margin-top: 3rem;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      padding-top: 1rem;
    }
    
    .post-nav a {
      color: #0366d6;
      text-decoration: none;
      font-weight: bold;
    }
    
    .post-nav a:hover {
      text-decoration: underline;
    }
    
    .sidebar h3 {
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
      color: #0366d6;
    }
    
    .sidebar ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }
    
    .sidebar li {
      margin: 0.3rem 0;
    }
    
    .sidebar a {
      color: #24292e;
      text-decoration: none;
      display: block;
      padding: 0.25rem 0;
    }
    
    .sidebar a:hover {
      color: #0366d6;
      text-decoration: underline;
    }
    
    .content {
      flex: 1;
      min-width: 0;
    }
    
    .content img {
      max-width: 100%;
      height: auto;
    }
    
    .content pre {
      padding: 1rem;
      background-color: #f6f8fa;
      border-radius: 6px;
      overflow-x: auto;
    }
    
    .content code {
      background-color: #f6f8fa;
      padding: 0.2em 0.4em;
      border-radius: 3px;
      font-size: 85%;
    }
    
    .content pre code {
      background-color: transparent;
      padding: 0;
    }
    
    .btn {
      display: inline-block;
      margin-bottom: 1rem;
      color: rgba(255, 255, 255, 0.9);
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      border-style: solid;
      border-width: 1px;
      border-radius: 0.3rem;
      padding: 0.75rem 1rem;
      text-decoration: none;
      transition: all 0.2s;
    }
    
    .btn:hover {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .language-toggle {
      margin-bottom: 0;
    }

    .language-btn {
      background-color: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.3);
      font-weight: 500;
    }

    .header-controls .btn {
      padding: 0;
      width: 42px;
      height: 42px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
    }

    .header-controls .btn svg {
      width: 24px;
      height: 24px;
      fill: #fff;
    }

    .language-btn:hover {
      background-color: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.4);
    }
    
    .header-title {
      text-align: left;
    }
    
    .header-controls {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .page-header .btn {
      margin-bottom: 0;
    }

    .sidebar-toggle-btn {
      display: none;
      background-color: transparent;
      border: none;
      padding: 0.5rem;
      margin-right: 0.5rem;
      cursor: pointer;
    }
    .sidebar-toggle-btn .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      background-color: #fff;
      border-radius: 1px;
    }
    .sidebar-toggle-btn .icon-bar + .icon-bar {
      margin-top: 4px;
    }
    
    @media screen and (max-width: 768px) {
      .sidebar-toggle-btn {
        display: block;
      }
      .main-content {
        flex-direction: column;
      }
      
      .sidebar {
        width: 100%;
        display: none;
      }

      .sidebar.is-visible {
        display: block;
      }
      
      .sidebar nav {
        position: static;
        max-height: none; /* Reset max-height for mobile view */
        overflow-y: visible;
      }

      .page-header {
        justify-content: flex-start;
      }

      .project-name {
        font-size: 1.2rem;
      }
      
      .project-tagline {
        display: none;
      }

      .header-controls {
        gap: 0.5rem;
      }

      .header-controls .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
      }
    }
  </style>
</head>
<body>
  <header class="page-header" role="banner">
    <button type="button" class="sidebar-toggle-btn" id="sidebar-toggle">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="header-title">
      <h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
      <h2 class="project-tagline">{{ site.description | default: site.github.project_tagline }}</h2>
    </div>
    <div class="header-controls">
      <div class="language-toggle">
        <button id="languageToggle" class="btn language-btn"></button>
      </div>
      {% if site.github.is_project_page %}
        <a href="{{ site.github.repository_url }}" class="btn" title="View on GitHub">
          <svg xmlns="http://wwwsvg.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.91 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
        </a>
      {% endif %}
    </div>
  </header>

  <div class="main-content">
    <aside class="sidebar">
      <nav id="nav-zh" class="navigation-content" style="display: block;">
        {% include navigation.html %}
      </nav>
      <nav id="nav-en" class="navigation-content" style="display: none;">
        {% include navigation-en.html %}
      </nav>
    </aside>
    
    <main class="content" role="main">
      {{ content }}

      {%- if page.path contains 'original/' -%}
        {%- assign pages = site.pages | where_exp: "item", "item.path contains 'original/'" -%}
      {%- else -%}
        {%- assign pages = site.pages | where_exp: "item", "item.path contains 'chapters/'" -%}
      {%- endif -%}

      {%- comment -%}
        Build numeric-sorted chapter list without plugins:
        - extract number from path like "Chapter 4_ ..." using split + last + split
        - zero-pad single-digit numbers to ensure proper lexical sort
        - create entries "NN||<url>", sort them, then map back to page objects
      {%- endcomment -%}

      {%- assign chapter_entries = "" | split: "" -%}
      {%- assign other_pages = "" | split: "" -%}

      {%- for p in pages -%}
        {%- if p.path contains 'Chapter' -%}
          {%- assign num_str = p.path | split: 'Chapter ' | last | split: '_' | first | strip -%}
          {%- assign num = num_str | plus: 0 -%}
          {%- if num < 10 -%}
            {%- assign padded = '0' | append: num -%}
          {%- else -%}
            {%- assign padded = num | append: '' -%}
          {%- endif -%}
          {%- assign entry = padded | append: '||' | append: p.url -%}
          {%- assign chapter_entries = chapter_entries | push: entry -%}
        {%- else -%}
          {%- assign other_pages = other_pages | push: p -%}
        {%- endif -%}
      {%- endfor -%}

      {%- assign sorted_entries = chapter_entries | sort -%}
      {%- assign sorted_chapters = "" | split: "" -%}
      {%- for e in sorted_entries -%}
        {%- assign parts = e | split: '||' -%}
        {%- assign url = parts[1] -%}
        {%- assign matched = pages | where: "url", url -%}
        {%- if matched.size > 0 -%}
          {%- assign sorted_chapters = sorted_chapters | push: matched[0] -%}
        {%- endif -%}
      {%- endfor -%}

      {%- assign sorted_pages = other_pages | concat: sorted_chapters -%}

      {%- for page_item in sorted_pages -%}
        {%- if page_item.url == page.url -%}
          {%- assign current_index = forloop.index0 -%}
        {%- endif -%}
      {%- endfor -%}
      {%- assign pages = sorted_pages -%}

      
      {%- assign prev_index = current_index | minus: 1 -%}
      {%- assign next_index = current_index | plus: 1 -%}

      {%- if prev_index >= 0 -%}
        {%- assign prev_page = pages[prev_index] -%}
      {%- endif -%}

      {%- if next_index < pages.size -%}
        {%- assign next_page = pages[next_index] -%}
      {%- endif -%}

      {% if prev_page or next_page %}
      <nav class="post-nav">
        <div>
          {% if prev_page %}
            <a href="{{ prev_page.url | relative_url }}">
              {% if page.path contains 'original/' %}
                &laquo; Previous: {{ prev_page.title }}
              {% else %}
                &laquo; 上一章: {{ prev_page.title }}
              {% endif %}
            </a>
          {% endif %}
        </div>
        <div>
          {% if next_page %}
            <a href="{{ next_page.url | relative_url }}">
              {% if page.path contains 'original/' %}
                Next: {{ next_page.title }} &raquo;
              {% else %}
                下一章: {{ next_page.title }} &raquo;
              {% endif %}
            </a>
          {% endif %}
        </div>
      </nav>
      {% endif %}
    </main>
  </div>

  <script>
    // Language toggle functionality
    document.addEventListener('DOMContentLoaded', function() {
      const sidebarToggle = document.getElementById('sidebar-toggle');
      const sidebar = document.querySelector('.sidebar');

      if (sidebarToggle && sidebar) {
        sidebarToggle.addEventListener('click', function() {
          sidebar.classList.toggle('is-visible');
        });
      }

      const header = document.querySelector('.page-header');
      const sidebarNav = document.querySelector('.sidebar nav');
      if (header && sidebarNav) {
        const updateSidebarNavTop = () => {
          const headerHeight = header.offsetHeight;
          sidebarNav.style.top = (headerHeight + 20) + 'px';
          sidebarNav.style.maxHeight = `calc(100vh - ${headerHeight + 40}px)`;
        };
        updateSidebarNavTop();
        window.addEventListener('resize', updateSidebarNavTop);
      }

      const languageToggle = document.getElementById('languageToggle');
      const navZh = document.getElementById('nav-zh');
      const navEn = document.getElementById('nav-en');
      const pathname = window.location.pathname;

      // Determine current language from URL path
      const isEnglish = pathname.startsWith('/original/');

      // Set initial UI state based on language
      if (isEnglish) {
        navZh.style.display = 'none';
        navEn.style.display = 'block';
        languageToggle.textContent = '中';
      } else {
        navZh.style.display = 'block';
        navEn.style.display = 'none';
        languageToggle.textContent = 'En';
      }

      // Add click event listener to toggle button
      if (languageToggle) {
        languageToggle.addEventListener('click', function() {
            const currentPath = window.location.pathname;
            const isEnglish = currentPath.startsWith('/original/');
            // Handle root path, which might be '/' or '/index.html'
            const isRoot = currentPath === '/' || currentPath === '/index.html';

            let newUrl;

            if (isEnglish) {
                // Switch to Chinese
                if (currentPath === '/original/' || currentPath === '/original/index.html') {
                    newUrl = '/';
                } else {
                    newUrl = currentPath.replace('/original/', '/chapters/');
                }
            } else {
                // Switch to English
                if (isRoot) {
                    newUrl = '/original/';
                } else {
                    newUrl = currentPath.replace('/chapters/', '/original/');
                }
            }
            
            // If URL is unchanged (e.g. a non-content page like /CONTRIBUTING.html), go to the other language's homepage.
            if (newUrl === currentPath) {
               newUrl = isEnglish ? '/' : '/original/';
            }

            window.location.href = newUrl;
        });
      }

      // Fix README markdown links to work with Jekyll
      function fixMarkdownLinks() {
        const contentArea = document.querySelector('.content');
        if (contentArea) {
          const links = contentArea.querySelectorAll('a[href*=".md"]');
          links.forEach(function(link) {
            let href = link.getAttribute('href');
            // Only process relative links to markdown files
            if (href && !href.startsWith('http') && href.includes('.md')) {
              // Remove .md extension
              href = href.replace(/\.md$/, '');
              // Decode URL encoded characters for cleaner URLs
              href = decodeURIComponent(href);
              // Ensure it starts with proper base path
              if (!href.startsWith('/')) {
                href = '/' + href;
              }
              link.setAttribute('href', '{{ site.baseurl }}' + href);
            }
          });
        }
      }
      
      // Initial link fix
      fixMarkdownLinks();
    });
  </script>

  {% if site.google_analytics %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', '{{ site.google_analytics }}', 'auto');
      ga('send', 'pageview');
    </script>
  {% endif %}
  <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
  <script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

    createChat({
      webhookUrl: 'https://n8n.xindoo.xyz/webhook/891dc8de-d517-4a72-a5fb-b7d432f869c9/chat'
    });
  </script>
</body>
</html>